<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--<script src="js/rem750.js"></script>-->
		<script src="js/jquery.min.js"></script>
		<script src="js/lib/jquery.i18n.min.js"></script>
		<script type="text/javascript">
			(function(a){
			    var b = document.documentElement.clientWidth;
			    if(b>a)
			    b=a;
			document.documentElement.style.fontSize=b/a*100+'px';
			})(750);
			//var defaultLang = getQueryString("lan")//获取url参数设置语言
			//国际化
			var defaultLang = "cn";
			$("[i18n]").i18n({
			    defaultLang: defaultLang,
			    filePath: "i18n/",//html文件到项目根目录再到json文件
			    filePrefix: "i18n_",
			    fileSuffix: "",
			    forever: true,
			    callback: function() {
			        console.log("i18n is ready.");
			    }
			});
		</script>
		<!--<script src="js/lib/iScroll.js"></script>
    	<script src="js/lib/Mdate.js"></script>-->
		<link rel="stylesheet" type="text/css" href="css/layer/layer.css"/>
    	<link rel="stylesheet" type="text/css" href="css/picker.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="bg">
			<div class="text">
				
			</div>
		</div>
		<!--柱形图-->
		<div class="box dayFlow">
			<div class="tit">
				<input type="text" id="datePicker1" value="Day" />
				<span id="iconMore"></span>
			</div>
			<div class="valueBox">
				<div class="val1" id="todayFlow">0L</div>
				<div class="val2">本日累计流量</div>
			</div>
			<div id="barContainer1" style="height: 2.9rem;">
				
			</div>
		</div>
		<!--<p i18n="footer.about">关于</p>-->
		<div class="box PHBox">
			<div class="tit">
				<div class="titCon">
					<div class="icon left"></div>
					<div class="icon right"></div>
					<input type="text" id="datePicker2" value="" />
				</div>
			</div>
			<div class="valueBox">
				PH Value <span id="PH">7.0</span>
			</div>
			<div id="barContainer2" style="height: 3.4rem;">
				
			</div>
		</div>
		<!--过滤重金属-->
		<!--活动图-->
		<div class="guolvBox">
			<div class="tit">
				<div class="left">滤过重金属</div>
				<div class="right">
					<input type="text" id="datePicker4" value="Day" />
					<span id="iconMore1"></span>
				</div>
			</div>
			<div class="conBox" id="circlesBox">

			</div>
			<!--面积图,浊度值-->
			<!--<div class="box areaBox">
				<div class="text">
					<div class="left">
						浊度值<span id="areaValue">0.389</span>
					</div>
					<div class="right">
						较昨天
						<span id="changeVal">up10%</span>
					</div>
				</div>
				<div id="containerArea" style="width: 100%;height: 3rem;"></div>
			</div>-->
			
			<div class="germLvBox">
				<div class="left">
					<p>BACTERIAL FILTERTION VALUE</p>
					<div class="bot">
						<span class="txt">细菌过滤值</span>
						<span class="val">100%</span>
					</div>
				</div>
				<div class="right">
					<div class="circleCon">
						100%
					</div>
				</div>
			</div>
		</div>
		<!--硬度-->
		<div class="linBg">
			<div class="box lineBox">
				<div class="dateHead">
					<div class="titCon">
						<div class="icon left"></div>
						<div class="icon right"></div>
						<input type="text" id="datePicker3" value="" />
					</div>
				</div>
				<div class="conBox">
					<div class="top">
						<div class="left">
							mg
						</div>
						<div class="right">
							<div class="legendCa">
								Ca硬度
							</div>
							<div class="legendMg">
								Mg硬度
							</div>
						</div>
					</div>
					<div id="lineContainer" style="height: 3.5rem;width: 6rem;margin: 0 auto;">
						<!--图表-->
					</div>
				</div>
			</div>
			
		</div>
		
		<!--用水习惯评分-->
		<div class="habitScoreBg">
			<div class="box habitScore">
				<div class="left">
					<!--容器球-->
					<div class="bgWhite">
						<div class="conBox">
							<div class="con">
								<div class="mask" id="mask">
									
								</div>
								<div class="score" id="score">
									89分
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="right">
					<h4 class="tit">
						家庭用水习惯评分
					</h4>
					<div class="line">
						<div class="tag">
							节约用水
						</div>
						<div class="contain">
							<div class="con conSave" id="conSave"></div>
						</div>
						<div class="data" id="data1">
							0%
						</div>
					</div>
					<div class="line">
						<div class="tag">
							饮水规律
						</div>
						<div class="contain">
							<div class="con conSave" id="conRagu"></div>
						</div>
						<div class="data" id="data2">
							50%
						</div>
					</div>
					<div class="line">
						<div class="tag">
							机芯更换
						</div>
						<div class="contain">
							<div class="con conSave" id="conCha"></div>
						</div>
						<div class="data" id="data3">
							70%
						</div>
					</div>
					<div class="line">
						<div class="tag">
							饮水健康
						</div>
						<div class="contain">
							<div class="con conSave" id="conHealth"></div>
						</div>
						<div class="data" id="data4">
							60%
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--<script src="js/lib/jquery-3.2.1.min.js"></script>-->
		<script src="js/highcharts.js"></script>
		<script src="js/highcharts-more.js"></script>
		<script src="js/solid-gauge.js"></script>
		<script src="js/lib/picker.min.js"></script>
		<script src="js/lib/layer.js"></script>
		<!--<script src="js/lib/jquery.date.js"></script>-->
		<!--柱状图的，导出模块-->
		<script src="js/fun.js"></script>
		<script src="js/index.js"></script>
	</body>
</html>
